<template>
  <div class="container">
    <headerNav />
    <div class="content mindWidth">
      <!-- 面包屑 -->
      <div class="nav">
        <span @click="$router.push('/')">首页</span>>
        <span>申报政策</span>
      </div>
      <div class="list-content">
        <el-table
          v-if="policyList && policyList.length"
          :data="policyList"
          borderstyle="width: 100%"
          :header-cell-style="{'text-align':'left'}"
          :cell-style="{'text-align':'left'}"
        >
          <el-table-column type="index" label="序号" />
          <el-table-column label="政策名称">
            <template slot-scope="{row}">
              <div class="policy" :title="row.title">
                <a
                  :href="row.entranceUrl ? row.entranceUrl : '/inform/'+row.policyId"
                  target="blank"
                  v-html="row.title"
                ></a>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="奖励金额" width="120px">
            <template slot-scope="{row}">
              <span>{{row.conditionRewardAmount || '--'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="申报时间" width="120px">
            <template slot-scope="{row}">
              <span>{{row.conditionDeclarationTime || '--'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="申报通知">
            <template slot-scope="{row}">
              <div v-if="row.policyInterprets && row.policyInterprets.length">
                <p class="interpret" v-for="item in row.policyInterprets" :key="item.id">
                  <a
                    :href="item.entranceUrl ? item.entranceUrl : '/gUDetails/'+item.id"
                    target="blank"
                    v-html="item.title"
                  ></a>
                </p>
              </div>
              <div v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column label>
            <template slot-scope="{row}">
              <a
                v-if="row.whetherCanJumpPage === 1"
                @click="departmentInside(row.departmentId,row.keyword)"
              >部门政策</a>
            </template>
          </el-table-column>
        </el-table>
        <no-data v-else></no-data>
      </div>
      <!-- 分页 -->
      <div class="pageList">
        <div class="page">
          <paging ref="page" @CurrentPage="changePageNo" :total="total" :pageNo="form.pageNo"></paging>
        </div>
      </div>
    </div>
    <navigation />
    <footerNav />
  </div>
</template>
<script>
import paging from "../../components/PageQuery";
import noData from "../../components/NoData";
import { getCompanyDeclarePolicyInfo } from "../../api/api.js";
export default {
  components: {
    paging,
    noData
  },
  data() {
    return {
      policyList: [],
      form: {
        pageNo: 1,
        pageSize: 10,
        id: this.$route.query.id,
        companyName: this.$route.query.name
      },
      total: 0
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      const data = await getCompanyDeclarePolicyInfo(this.form);
      // console.log("数据", data);
      this.policyList = data.result.records;
      this.total = data.result.total;
    },
    changePageNo(value) {
      this.form.pageNo = value;
      this.getList();
    },
    departmentInside(id, key) {
      this.$router.push({
        path: "/departmentInside",
        query: {
          id: id,
          key: key
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
/deep/ .el-table th.el-table__cell {
  font-size: 14px;
  color: #fff;
  background-color: #2862ad;
}
/deep/ .el-table th,
.el-table tr {
  font-size: 14px;
  color: #fff;
  background-color: #2862ad;
}
/deep/ .el-table--enable-row-transition .el-table__body td {
  background-color: #fff;
}
a {
  cursor: pointer;
}
.container {
  .content {
    // 面包屑
    .nav {
      width: 100%;
      height: 50px;
      line-height: 50px;
      span {
        font-size: 14px;
        color: #333;
        margin: 0 10px;
        cursor: pointer;
      }
    }
    .list-content {
      min-height: 550px;
      .policy {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        a {
          color: #333;
          cursor: pointer;
        }
        a:hover {
          color: #1678ff;
        }
      }
      .interpret {
        width: 100%;
        border-bottom: 1px solid #ebeef5;
        padding: 10px 0;
        a {
          color: #333;
          cursor: pointer;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        a:hover {
          color: #1678ff;
        }
      }
      .interpret:last-child {
        border-bottom: none;
      }
      .no-data-box {
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .no-data {
          width: 150px;
          height: 150px;
          margin: 0 auto;
          background-repeat: no-repeat;
          background-position: center;
        }
      }
    }
  }
  /* 这里是分页 */
  .pageList {
    height: 100px;
    display: flex;
    flex-direction: row-reverse;
  }
  .page {
    display: flex;
    float: right;
    align-items: center;
    .pageNum {
      font-size: 14px;
      margin-right: 20px;

      span {
        color: #44a2ff;
        margin: 0 5px;
      }
    }
    .tempPage {
      margin-left: 10px;
      input {
        margin: 0 5px;
        text-align: center;
        width: 30px;
        height: 30px;
        border: 1px solid #ccc;
      }
    }
  }
}
</style>